﻿
@{
    ViewBag.Title = "MassesVoice";
}

<link href="~/css/dropload.css" rel="stylesheet" />
<link href="~/css/swiper.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="~/css/cropper.min.css">
<link type="text/css" href="~/css/mui.min.css" rel="stylesheet" />
<link href="~/css/common.css" rel="stylesheet" />
<style>
    .swiper-container {
        position: fixed;
        width: 100%;
        height: 2rem;
        background-color: #eee;
        z-index: 99999;
        top: 3.2rem;
    }

    .swiper-slide {
        text-align: center;
        font-size: 18px;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }

    .swiper-xlbtn {
        position: absolute;
        margin-top: -2rem;
        z-index: 999999;
        width: 2rem;
        height: 2rem;
        background-color: #eee;
        right: 0;
        filter: alpha(opacity=50);
        -moz-opacity: 0.5;
        -khtml-opacity: 0.5;
        opacity: 0.9;
    }

    .swiper-slide a {
        color: #212121;
    }

    .current {
        color: #ed4242;
    }

    .aui-slide-page-wrap {
        z-index: 2;
    }

    .aui-list:after {
        background-color: #ffffff;
    }
</style>

<header class="aui-bar aui-bar-nav" id="aui-header">
    <div class="aui-title">群众心声</div>
    <a href="@Url.Action("Search")" class="aui-pull-right aui-btn aui-btn-outlined"> <span class="aui-iconfont aui-icon-search"></span> </a>
</header>

<!--导航Start-->
<div class="swiper-container">
    <div class="swiper-wrapper">

    </div>
    <div class="swiper-xlbtn">
        <img src="~/image/xiala000.png" style="margin: 0.7rem 0 0 0.5rem;" />
    </div>
</div>
<!--导航End-->
<!--表单开始-->
<div class="aui-content aui-margin-b-15 content">
    <div id="changeAvatar" style="line-height:1;text-align:center;">
        <img id="upimg" src="~/image/add.png" alt="头像" style="width:50%;" />
    </div>
    <ul class="aui-list aui-form-list" style="margin-bottom: 3rem;">
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-label">
                    姓名
                </div>
                <div class="aui-list-item-input">
                    <input id="txtUserName" type="text" placeholder="姓名">
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-label">
                    联系方式
                </div>
                <div class="aui-list-item-input">
                    <input id="txtMobileNo" type="tel" placeholder="电话">
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-label">
                    主题
                </div>
                <div class="aui-list-item-input">
                    <input id="txtTitle" type="text" placeholder="主题">
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-label">
                    是否公开
                </div>
                <div class="aui-list-item-input">
                    <input id="cbxPublicity" type="checkbox" class="aui-switch" checked="">
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner aui-list-item-center aui-list-item-btn">
                <div class="aui-btn aui-btn-danger aui-margin-r-5" onclick="return locationUrl('@Url.Action("SuiShouPai")');" >返回</div>
                <div id="btnSave" class="aui-btn aui-btn-info aui-margin-l-5">提交</div>
            </div>
        </li>
    </ul>
</div>

<!--表单结束-->
<!--上传头像Start-->
<div id="showResult" style="display:none;">
    <div style="width: 50%;margin: 0 auto;margin-top: 10px;">
        <input id="image" type="file" accept="image/*" capture="camera" />
    </div>
</div>
<div id="showEdit" style="display: none;width:100%;height: 100%;position: absolute;top:0;left: 0; z-index: 99999;">
    <div style="width:100%;position: absolute;top:10px;left:0px;">
        <button class="mui-btn" data-mui-style="fab" id='cancleBtn' style="margin-left: 10px;">取消</button>
        <button class="mui-btn" data-mui-style="fab" data-mui-color="primary" id='confirmBtn' style="float:right;margin-right: 10px;">确定</button>
    </div>
    <div id="report">
        <img src="/image/mei.jpg" style="width: 300px;height:300px">
    </div>

</div>
<!--上传头像End-->
<!--加载动画Start-->
<div id="loading">
    <div class="loading">
        <img src="~/image/loading.gif" />
    </div>
</div>
<!--加载动画End-->
<!--创建人ID-->
<input id="hidCreateBy" type="hidden" />


<script src="~/Scripts/swiper.min.js"></script>
<script src="~/Scripts/commonJS.js"></script>
<script type="text/javascript" src="~/Scripts/lrz.mobile.min.js"></script>
<script type="text/javascript" src="~/dist/lrz.all.bundle.js"></script>
<script type="text/javascript" src="~/Scripts/cropper.min.js"></script>
<script src="~/Scripts/aui-dialog.js"></script>

<script type="text/javascript">

    var locationUrl = function (url) {
        window.location.href = url;
    };

    var dialog = new auiDialog({});
    $(function () {

        //获取菜单ID
        var ID = (getUrlParam('ID') == null) ? "" : getUrlParam('ID');

        //加载顶部菜单
        $.ajax({
            url: "http://shtdj.shanhaitian.gov.cn/AppInterface/api/Frame/GetMenu",
            contentType: "application/json",
            type: "POST",
            async: true,
            data: JSON.stringify({ ID: 'HomePage', IsChild: 'false' }),
            dataType: "json",
            success: function (data, status) {
                var dd = eval(data.result);
                var result = '';
                for (var i = 0; i < dd.length; i++) {

                    if (ID == "" && i == 0) {
                        //默认第一个菜单被选中
                        result += '<div class="swiper-slide"><a href="' + dd[i].NavigateUrl + '" style="color:#ed4242;" >'
                    }
                    else if (ID == dd[i].ID) {
                        result += '<div class="swiper-slide"><a href="' + dd[i].NavigateUrl + '" style="color:#ed4242;" >'
                    }
                    else {
                        result += '<div class="swiper-slide"><a href="' + dd[i].NavigateUrl + '">'
                    }

                    result += dd[i].Name + '</a></div>';
                }
                result += '<div class="swiper-slide"></div>';
                $(".swiper-wrapper").html(result);

                //导航滑动效果
                var swiper = new Swiper('.swiper-container', {
                    slidesPerView: 4,
                    paginationClickable: true,
                    spaceBetween: 0,
                    freeMode: true
                });
            },
            error: function (xhr, textStatus) {
                console.log('错误')
                console.log(xhr)
                console.log(textStatus)
            }
        });
        //隐藏加载动画
        $("#loading").hide();
        //跳转到全部导航页面
        $(".swiper-xlbtn").click(function () {
            window.location.href = '@Url.Action("Menu")';
        });

        //上传图片
        function toFixed2(num) {
            return parseFloat(+num.toFixed(2));
        }

        $('#cancleBtn').on('click', function () {
            $("#showEdit").fadeOut();
            $('#showResult').fadeIn();
        });

        $('#confirmBtn').on('click', function () {
            //显示加载动画
            $("#loading").show();
            $("#showEdit").fadeOut();

            var $image = $('#report > img');
            var dataURL = $image.cropper("getCroppedCanvas");
            var imgurl = dataURL.toDataURL("image/jpeg", 0.5);
            $("#changeAvatar > img").attr("src", imgurl);
            $('#showResult').fadeIn();

            //获取Session
            $.ajax({
                url: "@Url.Action("GetSession")",
                type: "POST",
                contentType: 'application/json',
                data: {},
                dataType: "json",
                success: function (data, status) {
                    var dd = eval(data);

                    if (dd.code == "201") {
                        //对话框
                        dialog.alert({
                            title: "消息提示",
                            msg: dd.msg,
                            buttons: ['确定']
                        }, function (ret) {
                            console.log(ret);
                            window.location.href = "@Url.Action("Login")";
                        });
                    } else {
                        var cc = dd.result;
                        //上传图片
                        $.ajax({
                            url: "http://shtdj.shanhaitian.gov.cn/AppInterface/api/MassesVoice/UpImage",
                            type: "POST",
                            contentType: "application/json",
                            data: JSON.stringify({ imgurl: imgurl, Extension: ".jpg" }),
                            dataType: "json",
                            success: function (data, status) {
                                var dd = eval(data);
                                if (dd.code == "200") {
                                    //填充图片
                                    var url = "http://shtdj.shanhaitian.gov.cn/AppInterface/" + dd.result.ImageUrl;
                                    $("#upimg").prop("src", url).attr("style", "width:100%");
                                }
                                else {
                                    //对话框
                                    dialog.alert({
                                        title: "消息提示",
                                        msg: dd.msg,
                                        buttons: ['确定']
                                    }, function (ret) {
                                        console.log(ret);
                                        window.location.href = "@Url.Action("MassesVoice")";
                                    });
                                }

                                //隐藏加载动画
                                $("#loading").hide();
                            },
                            error: function (xhr, textStatus) {
                                console.log('错误')
                                console.log(xhr)
                                console.log(textStatus)
                            }
                        });

                    }
                },
                error: function (xhr, textStatus) {
                    console.log('错误')
                    console.log(xhr)
                    console.log(textStatus)
                }
            });

        });

        function cutImg() {
            $('#showResult').fadeOut();
            $("#showEdit").fadeIn();
            var $image = $('#report > img');

            $image.cropper({
                checkImageOrigin: true,
                autoCropArea: 0.5
            });
        }

        function doFinish(startTimestamp, sSize, rst) {
            var finishTimestamp = (new Date()).valueOf();
            var elapsedTime = (finishTimestamp - startTimestamp);
            //$('#elapsedTime').text('压缩耗时： ' + elapsedTime + 'ms');

            var sourceSize = toFixed2(sSize / 1024),
                resultSize = toFixed2(rst.base64Len / 1024),
                scale = parseInt(100 - (resultSize / sourceSize * 100));
            $("#report").html('<img src="' + rst.base64 + '" style="width: 100%;height:100%">');
            cutImg();
        }

        $('#image').on('change', function () {
            var startTimestamp = (new Date()).valueOf();
            var that = this;
            lrz(this.files[0], {
                width: 800,
                height: 800,
                quality: 0.7
            })
                .then(function (rst) {
                    //console.log(rst);
                    doFinish(startTimestamp, that.files[0].size, rst);
                    return rst;
                })
                .then(function (rst) {
                    // 这里该上传给后端啦
                    // 伪代码：ajax(rst.base64)..
                    return rst;
                })
                .then(function (rst) {
                    // 如果您需要，一直then下去都行
                    // 因为是Promise对象，可以很方便组织代码 \(^o^)/~
                })
                .catch(function (err) {
                    // 万一出错了，这里可以捕捉到错误信息
                    // 而且以上的then都不会执行

                    alert(err);
                })
                .always(function () {
                    // 不管是成功失败，这里都会执行
                });
        });

        $.ajax({
            url: "@Url.Action("GetSession")",
            type: "POST",
            contentType: 'application/json',
            data: {},
            dataType: "json",
            success: function (data, status) {
                var dd = eval(data);

                if (dd.code == "201") {
                    //对话框
                    dialog.alert({
                        title: "消息提示",
                        msg: dd.msg,
                        buttons: ['确定']
                    }, function (ret) {
                        console.log(ret);
                        window.location.href = "@Url.Action("Login")";
                    });
                } else {
                    var cc = dd.result;
                    //给隐藏域赋值
                    $("#hidCreateBy").val(cc.UserId);

                    //获取个人信息
                    $.ajax({
                        url: "http://shtdj.shanhaitian.gov.cn/AppInterface/api/User/GetPartyBuildingUserModel",
                        type: "POST",
                        contentType: 'application/json',
                        async: true,
                        data: JSON.stringify({ UserId: cc.UserId }),
                        dataType: "json",
                        success: function (data, status) {
                            var dd = eval(data);
                            if (dd.code == "201") {
                                //对话框
                                dialog.alert({
                                    title: "消息提示",
                                    msg: dd.msg,
                                    buttons: ['确定']
                                }, function (ret) {
                                    console.log(ret);
                                    window.location.href = "@Url.Action("Login")";
                                });
                            }

                            //隐藏加载动画
                            $("#loading").hide();
                        },
                        error: function (xhr, textStatus) {
                            console.log('错误')
                            console.log(xhr)
                            console.log(textStatus)
                        }
                    });
                }

            },
            error: function (xhr, textStatus) {
                console.log('错误')
                console.log(xhr)
                console.log(textStatus)
            }
        });

        //点击Logo触发上传头像事件
        $("#changeAvatar > img").click(function () {
            $("#image").click();
        });

        //保存
        $("#btnSave").click(function () {
            //显示加载动画
            $("#loading").show();
            var imgurl = $("#upimg").prop("src");
            $("#report").html('<img src="' + imgurl + '">');
            var content = "<img src=\"" + imgurl + "\">";

            $.ajax({
                type: "POST",
                url: "http://shtdj.shanhaitian.gov.cn/AppInterface/api/MassesVoice/Save",
                contentType: "application/json",
                async: true,
                dataType: "json",
                data: JSON.stringify({ UserName: $("#txtUserName").val(), MobileNo: $("#txtMobileNo").val(), cTitle: $("#txtTitle").val(), Publicity: $("#cbxPublicity").prop("checked"), content: content, CreateBy: $("#hidCreateBy").val() }),
                success: function (data, status) {
                    var dd = eval(data);

                    if (dd.code == "201") {
                        //对话框
                        dialog.alert({
                            title: "消息提示",
                            msg: dd.msg,
                            buttons: ['确定']
                        }, function (ret) {
                            console.log(ret);
                            window.location.href = "@Url.Action("MassesVoice")";
                        });
                    }
                    else {
                        //对话框
                        dialog.alert({
                            title: "消息提示",
                            msg: dd.msg,
                            buttons: ['确定']
                        }, function (ret) {
                            console.log(ret);
                            window.location.href = "@Url.Action("SuiShouPai")";
                        });
                    }

                    //隐藏加载动画
                    $("#loading").hide();
                },
                error: function (xhr, textStatus) {
                    console.log('错误')
                    console.log(xhr)
                    console.log(textStatus)
                }
            });
        });

    });
</script>
